<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>JavaScripTools Manual</title>
    <link rel="stylesheet" type="text/css" href="../../css/style.css">
</head>

<body>
<br>
<h1>JavaScripTools Manual</h1>
<h2>JavaScripTable</h2>
<h3>Customizing the look and feel</h3>
<p>There are many customization points about table style and display options.
The default default value constant appears in parenthesis after each property.
For defails about customizing the default values, click 
<a href="General_customizing.html">here</a>.</p>
<p>The <code>width</code> (JST_DEFAULT_WIDTH), <code>align</code> (JST_DEFAULT_ALIGN),
<code>border</code> (JST_DEFAULT_BORDER), <code>padding</code> (JST_DEFAULT_PADDING) 
and <code>spacing</code> (JST_DEFAULT_SPACING) reflects those attributes on the 
TABLE element (spacing is cellspacing and padding is cellpadding).</p>
<p>Column headers may be suppressed by setting <code>showColumnHeaders</code>
(JST_DEFAULT_SHOW_COLUMN_HEADERS) to false.</p>
<p>The table may be set to printing mode, where only data is displayed, without
highlightings, functions or navigation. This is done by setting <code>printing</code>
to true.</p>
<br><br>
<a name="css"></a>
<h4>CSS classes</h4>
<p>Style is set using CSS (Cascading Style Sheet) classes. There are several classes,
used for different properties. First, is important to say that, each cell is rendered with a class, and the
text has a inner SPAN with another class, to allow text customization and highlighting. So, you will normally
see a class for the cell and another for the text.</p>
<p>At a first glance, there are a lot of properties, so, it should be hard to customize. But that's not true,
since you should put all table classes on a css file (which may be different from the file for the rest
of your pages style), and that's done (normally) once per project. You can copy one of the sample themes on the
<code>/samples/themes</code> directory.</p>
<p>Here is the complete list of classes:</p>
<table border="1" cellspacing="0">
    <tr>
        <th colspan="3">Column Headers</th>
    </tr>
    <tr>
        <th>Property</th>
        <th>Default Value</th>
        <th>Applied to</th>
    </tr>
    <tr>
        <td>columnHeaderClass</td>
        <td>JSTColumnHeader</td>
        <td>Header cells</td>
    </tr>
    <tr>
        <td>columnHeaderTextClass</td>
        <td>JSTColumnHeaderText</td>
        <td>Header texts</td>
    </tr>
    <tr>
        <td>highlightedColumnHeaderClass</td>
        <td>JSTHighlightedColumnHeader</td>
        <td>Header cells when highlighting is enabled and the mouse is over it</td>
    </tr>
    <tr>
        <td>highlightedColumnHeaderTextClass</td>
        <td>JSTHighlightedColumnHeaderText</td>
        <td>Header text when highlighting is enabled and the mouse is over it</td>
    </tr>
    <tr>
        <th colspan="3">Odd Rows</th>
    </tr>
    <tr>
        <th>Property</th>
        <th>Default Value</th>
        <th>Applied to</th>
    </tr>
    <tr>
        <td>oddRowClass</td>
        <td>JSTOddRow</td>
        <td>TR elements of odd rows</td>
    </tr>
    <tr>
        <td>highlightedOddRowClass</td>
        <td>JSTHighlightedOddRow</td>
        <td>TR elements of odd rows when highlighting is enabled and the mouse is over it</td>
    </tr>
    <tr>
        <td>oddRowCellClass</td>
        <td>JSTOddRowCell</td>
        <td>TD elements of odd rows</td>
    </tr>
    <tr>
        <td>highlightedOddRowCellClass</td>
        <td>JSTHighlightedOddRowCell</td>
        <td>TD elements of odd rows when highlighting is enabled and the mouse is over it</td>
    </tr>
    <tr>
        <td>oddRowTextClass</td>
        <td>JSTOddRowText</td>
        <td>Text inside odd rows</td>
    </tr>
    <tr>
        <td>highlightedOddRowTextClass</td>
        <td>JSTHighlightedOddRowText</td>
        <td>Text inside odd rows when highlighting is enabled and the mouse is over it</td>
    </tr>
    <tr>
        <td>oddRowTextWithFunctionClass</td>
        <td>JSTOddRowTextWithFunction</td>
        <td>Text inside odd rows when there is a cell function</td>
    </tr>
    <tr>
        <td>highlightedOddRowTextWithFunctionClass</td>
        <td>JSTHighlightedOddRowTextWithFunction</td>
        <td>Text inside odd rows when there is a cell function, highlighting is enabled and the mouse is over it</td>
    </tr>
    <tr>
        <th colspan="3">Even Rows</th>
    </tr>
    <tr>
        <th>Property</th>
        <th>Default Value</th>
        <th>Applied to</th>
    </tr>
    <tr>
        <td>evenRowClass</td>
        <td>JSTEvenRow</td>
        <td>TR elements of even rows</td>
    </tr>
    <tr>
        <td>highlightedEvenRowClass</td>
        <td>JSTHighlightedEvenRow</td>
        <td>TR elements of even rows when highlighting is enabled and the mouse is over it</td>
    </tr>
    <tr>
        <td>evenRowCellClass</td>
        <td>JSTEvenRowCell</td>
        <td>TD elements of even rows</td>
    </tr>
    <tr>
        <td>highlightedEvenRowCellClass</td>
        <td>JSTHighlightedEvenRowCell</td>
        <td>TD elements of even rows when highlighting is enabled and the mouse is over it</td>
    </tr>
    <tr>
        <td>evenRowTextClass</td>
        <td>JSTEvenRowText</td>
        <td>Text inside even rows</td>
    </tr>
    <tr>
        <td>highlightedEvenRowTextClass</td>
        <td>JSTHighlightedEvenRowText</td>
        <td>Text inside even rows when highlighting is enabled and the mouse is over it</td>
    </tr>
    <tr>
        <td>evenRowTextWithFunctionClass</td>
        <td>JSTEvenRowTextWithFunction</td>
        <td>Text inside even rows when there is a cell function</td>
    </tr>
    <tr>
        <td>highlightedEvenRowTextWithFunctionClass</td>
        <td>JSTHighlightedEvenRowTextWithFunction</td>
        <td>Text inside even rows when there is a cell function, highlighting is enabled and the mouse is over it</td>
    </tr>
</table>
<br><br>
<a name="highlighting"></a>
<h4>Highlighting</h4>
<p>Highlighting means CSS classes that are used when the user places the mouse cursor inside a row, cell or text.
There are 2 properties (default value constant in parenthesis): <code>rowHighlighting</code> (JST_DEFAULT_ROW_HIGHLIGHTING) 
and <code>columnHeaderHighlighting</code> (JST_DEFAULT_COLUMN_HEADER_HIGHLIGHTING) that defines if
highlighting is enabled for rows and column headers. Their possible values are one of these constants: <ul>
    <li>JST_HIGHLIGHTING_NONE: No highlighting</li>
    <li>JST_HIGHLIGHTING_TEXT: Only the text</li>
    <li>JST_HIGHLIGHTING_CELL: Only the cell</li>
    <li>JST_HIGHLIGHTING_TEXT_CELL: Both the text and the cell</li>
    <li>JST_HIGHLIGHTING_ROW: Only the row</li>
    <li>JST_HIGHLIGHTING_ROW_TEXT: Both row and text</li>
    <li>JST_HIGHLIGHTING_ROW_CELL: Both row and cell</li>
    <li>JST_HIGHLIGHTING_ROW_TEXT_CELL: Row, text and cell</li>
</ul></p>
<p>Important: The column header highlighting does not highlights rows.</p>
<br><br>
<hr>
<table width="100%">
    <tr>
        <td width="33%" align="left"><b>Previous:</b><br><a href="JavaScripTable_row_props.html">Row properties</a></td>
        <td width="34%" align="center"><a href="index.html">Table of Contents</a></td>
        <td width="33%" align="right"><b>Next:</b><br><a href="JavaScripTable_interaction.html">User interaction</a></td>
    </tr>
</table>

</body>
</html>
